<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/common/common.css"/>
<link rel="stylesheet" type="text/css" href="css/safe.css"/>
<style>
    label.error {
        color: red;
        font-size: 12px;
        margin-left: 20px;
    }
</style>
<body>
<div id="web">
    <header class="clearfix">
        <div class="logo fl">
            <div>
                <img src="img/logo.png"/>
            </div>
        </div>
        <ul class="navbar fl clearfix">
            <li><a href="">首页</a></li>
            <li><a href="">骑行</a></li>
            <li><a href="">跑步</a></li>
            <li><a href="">休闲</a></li>
            <li><a href="">品牌区</a></li>
            <li><a href="">设计师</a></li>
        </ul>
        <ul class="nav-img fl clearfix">
            <li>
                <div class="search">
                    <input type="search"/>
                    <input type="image" src="img/search.gif"/>
                </div>
            </li>
            <li>
                <div class="shop_car">
                    <img src="img/shopping_car.png"/>
                </div>
            </li>
            <li>
                <div class="person">
                    <img src="img/person.png"/>
                </div>
            </li>
            <li>
                <div class="tel">
                    <img src="img/tel.jpg"/>
                </div>
            </li>
            <li>
                <div class="language">
                    <img src="img/language.png"/>
                </div>
            </li>
        </ul>
    </header>
    <section>
        <div class="place">
            <a href="">首页</a><span>></span><a href="">我的不二定制</a><span>></span><a href="">我的账户</a><span>></span><a
                href="" class="a_active">账号安全</a>

        </div>
        <div class="box clearfix">
            <div class="box-left fl clearfix">
                <div class="face">
                    <div class="img-box">
                        <img src="img/base_info/face.png"/>
                    </div>
                    <span style="padding-left: 227px;line-height: 50px">SUPER12</span><img class="face-icon"
                                                                                           src="img/safe/face-icon.png"/>
                </div>
                <div class="nav_left">
                    <div class="wrap">
                        <ul>
                            <li><a href="BE-Project/details.html">我的订单</a></li>
                            <li><a href="BE-Project/return.html">退货退款</a></li>
                            <li><a href="">申请售后</a></li>
                            <li><a href="">我要评价</a></li>
                        </ul>
                        <ul>
                            <li><a href="my_works.html">我的作品</a></li>
                        </ul>
                        <ul>
                            <li><a href="open_shop.html">我的店铺</a></li>
                            <li><a href="open_shop.html">查看店铺</a></li>
                            <li><a href="shop_manage.html">店铺管理</a></li>
                            <li><a href="shop_set.html">店铺设置</a></li>
                            <li><a href="goods_sold.html">已卖出的商品</a></li>
                            <li><a href="goods_manage.html">商品管理</a></li>
                        </ul>
                        <ul>
                            <li><a href="">我的收益</a></li>
                            <li><a href="goods_acc.html">商品结算</a></li>
                            <li><a href="money_apply.html">提现申请</a></li>
                            <li><a href="money_detail.html">资金明细</a></li>
                        </ul>
                        <ul>
                            <li><a href="email_link.html">我的账户</a></li>
                            <li><a href="base_info.html">基本信息</a></li>
                            <li><a href="my_address.html">我的地址</a></li>
                            <li><a href="bind.html">账号绑定</a></li>
                            <li><a href="safe.html" class="now">账号安全</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box-right fl">
                <h3>账号安全</h3>
                <div class="safe">
                    <p>旧密码</p>
                    <form id="demoForm">
                        <input type="password" name="old_pwd" id="old_pwd" placeholder="请输入旧密码"/>
                        <p>新密码</p>
                        <input type="password" name="new_pwd" id="new_pwd" placeholder="请输入新密码"/>
                        <p>确认新密码</p>
                        <input type="password" name="confirm-password"/>

                        <p class="inform">两次输入的密码不一致</p>
                        <input type="button" value="修改密码">
                    </form>
                </div>
            </div>
        </div>


    </section>
    <footer>
        <div class="list clearfix">
            <div class="foot-logo fl">
                <img src="img/foot-logo.png"/>
            </div>
            <div class="foot-list fl clearfix">
                <div>
                    <ul>
                        <li><a href="">新手指南</a></li>
                        <li><a href="">用户注册</a></li>
                        <li><a href="">定制流程</a></li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li><a href="">付款方式</a></li>
                        <li><a href="">支付方式</a></li>
                        <li><a href="">支付问题</a></li>
                        <li><a href="">常见问题</a></li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li><a href="">售后服务</a></li>
                        <li><a href="">退款换货</a></li>
                        <li><a href="">配送方式</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li><a href="">政策条款</a></li>
                        <li><a href="">服务协议</a></li>
                        <li><a href="">隐私条款</a></li>
                        <li><a href="">版权条款</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <p>© 2016 Wildto Corpation. All Rights Reserved闽ICP备14001544号-1</p>
    </footer>
</div>
<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<script src="vendor/messages_zh.js"></script>
<script>
    var validator1;
    $(document).ready(function () {
        validator1 = $("#demoForm").validate({
            debug: true,
            rules: {
                old_pwd: {
                    required: true,
                    minlength: 4,
                    maxlength: 32
                },
                new_pwd: {
                    required: true,
                    minlength: 4,
                    maxlength: 32,
                    equalTo: "#old_pwd"
                },

                "confirm-password": {
                    equalTo: "#new_pwd"
                }
            },
            messages: {
                old_pwd: {
                    required: '请输入旧密码',
                    minlength: '用户名不能小于4个字符',
                    maxlength: '用户名不能超过32个字符',
                    remote: '用户名不存在'
                },
                new_pwd: {
                    required: '请输入新密码',
                    minlength: '密码不能小于4个字符',
                    maxlength: '密码不能超过32个字符',
                    equalTo: "两次输入密码不一致"
                },
                "confirm-password": {
                    equalTo: "确认密码不一致"
                }

            },

            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).fadeOut().fadeIn();
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            submitHandler: function (form) {
                console.log($(form).serialize())
            }
        });

        $("#check").click(function () {
            console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
        });
    });
</script>
</body>
</html>
